<script setup lang="ts">
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { ExamApi } from '@/apis'
import { useTable } from '@/hooks'
import router from '@/router'
import { useUserStore } from '@/stores'
import ExamFormPanel from './ExamFormPanel.vue'
import ExamUploadPanel from './ExamUploadPanel.vue'

defineOptions({
  name: 'Exam',
})

const userStore = useUserStore()
const queryForm = reactive<ExamApi.ExamQuery>({})

const {
  tableData: dataList,
  loading,
  search,
  handleDelete,
} = useTable(() => ExamApi.getList({ ...queryForm }), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '考试名称', dataIndex: 'name', slotName: 'name', fixed: 'left', width: 250 },
  { title: '类型', dataIndex: 'examType', slotName: 'examType' },
  { title: '年级', dataIndex: 'grade', slotName: 'grade' },
  { title: '试卷总分', dataIndex: 'totalScore', slotName: 'totalScore', render: ({ record }) => record.totalScore || '--' },
  { title: '考试人数', dataIndex: 'studentCount', slotName: 'studentCount', render: ({ record }) => record.studentCount || '--' },
  { title: '最高得分', dataIndex: 'highestScore', slotName: 'highestScore', render: ({ record }) => record.highestScore || '--' },
  { title: '平均得分', dataIndex: 'averageScore', slotName: 'averageScore', render: ({ record }) => record.averageScore || '--' },
  { title: '备注', dataIndex: 'remark', slotName: 'remark', render: ({ record }) => record.remark || '--' },

  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['education:exam:write']),
  },
]

// 删除
const onDelete = (item: ExamApi.ExamResp) => {
  return handleDelete(() => ExamApi.remove(item.id), {
    content: `是否确定删除[${item.name}]?`,
    showModal: true,
  })
}

// 新增
const ExamFormPanelRef = ref<InstanceType<typeof ExamFormPanel>>()
const onAdd = () => {
  ExamFormPanelRef.value?.create()
}

// 详情
const onRowClick = (row) => {
  router.push({ path: '/education/interaction/exam/detail', query: { id: row.id } })
}

// 上传
const ExamUploadPanelRef = ref<InstanceType<typeof ExamUploadPanel>>()
const upload = () => {
  ExamUploadPanelRef.value?.open()
}
</script>

<template>
  <div>
    <ProPage title="考试成绩" description="对考试成绩进行管理" flex-table>
      <template #extra>
        <a-button v-permission="['edu:exam:write']" type="outline" @click="upload">
          <template #icon>
            <icon-plus />
          </template>
          <span>导入成绩</span>
        </a-button>
      </template>
      <ProTable
        row-key="id"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="false"
        @row-click="onRowClick"
        @refresh="search"
      >
        <template #toolbar-left>
          <a-input v-model="queryForm.name" placeholder="请输入考试名称关键字" allow-clear>
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
          <YearTermCascader :class-year="queryForm.classYear" :term="queryForm.term" check-strictly class="w-200px" />
          <DictSelect v-model="queryForm.grade" placeholder="请选择年级" code="Grade" class="w-150px" />
          <DictSelect v-model="queryForm.subject" placeholder="请选择科目" code="Subject" class="w-150px" />
        </template>

        <template #toolbar-right>
          <a-button v-permission="['edu:exam:read']" type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            <span>查询</span>
          </a-button>
          <a-button v-permission="['edu:exam:write']" type="primary" style="padding-right: 10px;" @click="onAdd">
            <template #icon>
              <icon-plus />
            </template>
            <span>创建</span>
          </a-button>
        </template>
        <template #examType="{ record }">
          <CellDict :value="record.examType" code="ExamTypeEnum" />
        </template>
        <template #grade="{ record }">
          <CellDict :value="record.grade" code="Grade" :tag="false" />
        </template>
        <template #action="{ record }">
          <a-space>
            <a-link v-permission="['edu:exam:write']" status="danger" @click.stop="onDelete(record)">
              删除
            </a-link>
          </a-space>
        </template>
      </ProTable>
    </ProPage>
    <ExamFormPanel ref="ExamFormPanelRef" @change="search" />
    <ExamUploadPanel ref="ExamUploadPanelRef" @change="search" />
  </div>
</template>

<style lang="less" scoped></style>
